import { Select, DatePicker, Form } from "antd";

const { RangePicker } = DatePicker;

interface Filters {
  projectType: string;
  documentType: string;
  dateRange: [string, string] | null;
  projectManager: string;
  projectPhase: string;
  industryType: string;
}

interface FilterPanelProps {
  filters: Filters;
  onChange: (filters: Filters) => void;
}

export default function FilterPanel({ filters, onChange }: FilterPanelProps) {
  return (
    <Form layout="inline" className="w-full">
      <Form.Item label="项目类型" className="mb-0">
        <Select
          placeholder="选择项目类型"
          value={filters.projectType}
          onChange={(value) => onChange({ ...filters, projectType: value })}
          style={{ width: 200 }}
          options={[
            { value: "all", label: "全部项目" },
            { value: "consulting", label: "工程咨询" },
            { value: "design", label: "工程设计" },
            { value: "management", label: "项目管理" },
            { value: "epc", label: "总承包" },
          ]}
        />
      </Form.Item>

      <Form.Item label="文档类型" className="mb-0">
        <Select
          placeholder="选择文档类型"
          value={filters.documentType}
          onChange={(value) => onChange({ ...filters, documentType: value })}
          style={{ width: 200 }}
          options={[
            { value: "all", label: "全部文档" },
            { value: "engineering", label: "工程设计文档" },
            { value: "contract", label: "合同文件" },
            { value: "progress", label: "进度报告" },
            { value: "change", label: "变更签证单" },
          ]}
        />
      </Form.Item>

      <Form.Item label="项目负责人" className="mb-0">
        <Select
          placeholder="选择负责人"
          value={filters.projectManager}
          onChange={(value) => onChange({ ...filters, projectManager: value })}
          style={{ width: 200 }}
          options={[
            { value: "all", label: "全部负责人" },
            { value: "zhangsan", label: "张三" },
            { value: "lisi", label: "李四" },
            { value: "wangwu", label: "王五" },
            { value: "zhaoliu", label: "赵六" },
          ]}
        />
      </Form.Item>

      <Form.Item label="项目阶段" className="mb-0">
        <Select
          placeholder="选择阶段"
          value={filters.projectPhase}
          onChange={(value) => onChange({ ...filters, projectPhase: value })}
          style={{ width: 200 }}
          options={[
            { value: "all", label: "全部阶段" },
            { value: "business", label: "经营阶段" },
            { value: "bidding", label: "投标阶段" },
            { value: "design", label: "设计阶段" },
            { value: "construction", label: "施工阶段" },
            { value: "acceptance", label: "竣工验收" },
          ]}
        />
      </Form.Item>

      <Form.Item label="行业类型" className="mb-0">
        <Select
          placeholder="选择行业"
          value={filters.industryType}
          onChange={(value) => onChange({ ...filters, industryType: value })}
          style={{ width: 200 }}
          options={[
            { value: "all", label: "全部行业" },
            { value: "electronics", label: "电子工程" },
            { value: "datacenter", label: "数据中心" },
            { value: "civil", label: "民用建筑" },
          ]}
        />
      </Form.Item>

      <Form.Item label="创建时间" className="mb-0">
        <RangePicker
          placeholder={["开始时间", "结束时间"]}
          onChange={(dates) => {
            if (dates) {
              onChange({
                ...filters,
                dateRange: [
                  dates[0]?.format("YYYY-MM-DD") || "",
                  dates[1]?.format("YYYY-MM-DD") || "",
                ],
              });
            } else {
              onChange({ ...filters, dateRange: null });
            }
          }}
        />
      </Form.Item>
    </Form>
  );
}
